<style>
	.badgefix{
	 padding: 12px 16px;
	 font-size: 14px;
	}
	.badgehe{
		background-color: #228B22;
	}
	.badgeme{
		background-color: #87CEEB;
	}
</style>
<div class="container-fluid">
        <div class="row">
        	<div class="col-md-3"></div>
        	<div class="form-group col-xs-3 ">
               	<input type="text" class="form-control" placeholder="{{'milkbeeApp.mymessage.content' | translate}} " name="content" id="field_content"
                    ng-model="vm.content"/>
        	</div>
            <div class="form-group col-md-3 no-padding-left">
                <button class="btn btn-primary"  ng-click="vm.send();" >
                    <span class="glyphicon glyphicon-plus"></span>
                    <span  data-translate="milkbeeApp.mymessage.send">      
                    </span>
                </button>
            </div>
        </div>
    </div>
<br/>
<div class="row">
	<div class="col-md-3">
		<ul class="list-group">
  			<li class="list-group-item list-group-item-info" ng-repeat="focus in vm.focuses">
  			<img class="img-circle" width="40px" height="40px" src='/content/images/upload/avatar/{{focus.userId}}.jpg' />	                   	
			<a ng-click="vm.content='@'+focus.name+' '+vm.content" >{{focus.name}}</a>
			<button  class="btn btn-info btn-sm"  ui-sref="instants.gift({userId:focus.userId})" >
				<span class="glyphicon glyphicon-plus"></span>
                <span  data-translate="milkbeeApp.mymessage.gift">  
			</button>
  			</li>
		</ul>
	</div>
	<div class="col-md-6 col-sm-12">
		<table class="jh-table table table-striped col-md-12">
			<thead><tr><td></td></tr></thead>
			<tbody>
				<tr ng-repeat="message in vm.instants">
				   <td ng-if="!message.me">
				   	<div >{{message.createdAt| date:'medium'}}</div>
				   	<img class="img-circle" width="40px" height="40px" src='/content/images/upload/avatar/{{message.fromUserId}}.jpg' />	                   	
				    {{message.fromUserName}} 
				   	<span class="badge badgefix badgehe" > {{message.content}} </span>
				   </td>
				   <td ng-if="message.me" class="pull-right">
				   	<div >{{message.createdAt| date:'medium'}}</div>
				   	<span><a ng-click="vm.content='@'+message.toUserName+' '+vm.content" >@{{message.toUserName}}</a></span>
				   	<span class="badge badgefix badgeme" > {{message.content}} </span>
				   	<img class="img-circle" width="40px" height="40px" src='/content/images/upload/avatar/{{message.fromUserId}}.jpg' />	                   	
				    {{message.fromUserName}} 
				   </td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="col-md-3"></div>
</div>